<template>
  <view class="bigbox">
    <view class="xuanzbox">
      <view class="dybox" v-for="item in listh">
        <view class="one">
          {{item.name}}
        </view>
        <view class="two">
          {{item.key}}
        </view>

      </view>
      <view class="hezbox" :class="bins==index ? 'bins' : ''" v-for="(item,index) in time" @click="okchnage(index)">
        <view style="margin-top: 25rpx;margin-left: 20rpx;font-weight: 600;">
          {{item.yaer}}
        </view>
        <view class="" style="display: flex;justify-content: space-evenly;margin-top: 25rpx;">
          <view style="font-size: 20rpx;margin-left: -50rpx;">
            {{item.time}}
          </view>
          <view style="margin-left: 150rpx; font-weight: 600;">
            {{item.moeny}}
          </view>
        </view>
      </view>
      
    </view>
     <view class="zhifubox">
          <view class="rdbox" v-for="(item,index) in options" @click="current=index">
                <view class="" style="margin-left: 60rpx;">
                  {{item.text}}
                </view>
                <view class=""  style="margin-right: 60rpx;">
                      <radio   :checked="index === current" />
                </view>
          </view>
     </view>
     
     
     <view class="jfbox">
      立即缴费
     </view>
  </view>
</template>

<script>
  import mixins from '@/common/js/mixins';
  export default {
    mixins: [mixins],
    data() {
      return {
        bins: 0,
        listh: [{
            name: '会员类型',
            key: '单位会员'
          },
          {
            name: '会员时长',
            key: '2022-6——2023-6'
          }
        ],
        time: [{
            yaer: '1年',
            time: '2022-04-01至2023-04-02',
            moeny: '100元/年'
          },
          {
            yaer: '2年',
            time: '2022-04-01至2024-04-02',
            moeny: '200元/年'
          },
          {
            yaer: '3年',
            time: '2022-04-01至2025-04-02',
            moeny: '300元/年'
          }
        ],
            options: [
                  { id: '0', text: "微信支付" },
                  { id: '1', text: "支付宝" },
                 
                ],
                current:0,
      }

    },
    methods: {
      okchnage(index) {
        this.bins = index
      },

    }
  }
</script>

<style lang="scss" scoped>
  .bigbox {
    width: 100%;
    height: 88vh;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;

    .xuanzbox {
      margin-top: 20rpx;
      width: 100%;
      height: 800rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .dybox {
        display: flex;
        justify-content: space-between;
        padding: 0 50rpx;
        margin-top: 20rpx;

      }

      .hezbox {
        margin-top: 50rpx;
        margin-left: 30rpx;
        width: 690rpx;
        height: 150rpx;
        background-color: #F5F5F5;
        border-radius: 10rpx;
        overflow: hidden;
      }

      .bins {
        border: 3rpx lawngreen solid;
        background-color: rgba(124, 252, 0, 0.1);
        ;

      }

    }
    .zhifubox {
      margin-top: 20rpx;
      width: 100%;
      height: 200rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .rdbox {
        display: flex;
        justify-content: space-between;
        margin-top: 35rpx;
      }
    }
    .jfbox {
      width: 600rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: #fff;
      text-align: center;
      margin-left: 30rpx;
      background-color:skyblue;
      border-radius: 40rpx;
      margin-top: 50rpx;
    }
  }
</style>